<template>
  <f7-page name="upload" color-theme="red">
    <div class="bg_blur"></div>
    <div style="position:absolute;left:0px;right:0px;height:100vh">
      <div class="navbarUpload">
        <div class="navbar_l" @click="$f7router.back()">
          <f7-button>
            <svg-icon iconClass="horn_down_white" />
          </f7-button>
        </div>
        <div class="navbar_m">
          <div class="mText">
            <span>上传歌手海报</span>
          </div>
        </div>
        <div class="navbar_r"></div>
      </div>
      <div class="upload_box">
        <f7-row style="margin:0.2rem 0.2rem">
          <f7-col>
            <p>
              歌手:
              <input
                class="inputA"
                type="text"
                name="ssinger"
                v-model="u_singer"
              />
            </p>
          </f7-col>
        </f7-row>
        <f7-row style="margin:0.2rem 0.2rem">
          <f7-col>
            <p>
              png|jpg|jpeg等格式的图片文件:
              <input
                style="margin-top:12px"
                id="songFile"
                @change="
                  (el) => {
                    handleFileChange(el)
                  }
                "
                type="file"
                name="file"
              />
            </p>
            <p>{{ singerPosterTip }}</p>
          </f7-col>
        </f7-row>

        <f7-row style="margin:0.2rem 0.2rem">
          <f7-col>
            <f7-button fill @click.stop="handleSubmitBtnClick"
              >提交</f7-button
            >
          </f7-col>
        </f7-row>
      </div>
    </div>
  </f7-page>
</template>
<script>
import { uploadSingerImg } from '@/api/upload.js'
import { debounce } from '@/utils/index.js'
export default {
  data() {
    return {
      u_singer: '',
      u_poster: '',
      singerPosterTip: '',
      formData: new FormData(),
    }
  },
  methods: {
    debounce:debounce,
    handleFileChange(e) {
      const input = e.target
      const files = e.target.files
      if (files && files[0]) {
        const file = files[0]
        if (file.size > 1024 * 1024 * 20) {
          this.singerPosterTip = '文件大小不能超过20M!'
          input.value = ''
          return false
        } else {
          this.singerPosterTip = ''
          if (this.u_singer === '') {
            this.u_singer = file.name.substring(0, file.name.lastIndexOf('.'))
          }
          this.formData.append('singerImg', file)
        }
      }
    },
    handleSubmitBtnClick:debounce(function() {
      console.log('handleSubmitBtnClick');
      if (!this.formData.get('singerImg')) {
        alert('请上传歌手海报')
        return
      }
      if (!this.u_singer) {
        alert('请填写歌手信息')
        return
      }
      this.formData.append('singer', this.u_singer)
      const self = this
      self.$f7.dialog.preloader()
      uploadSingerImg(this.formData)
        .then((res) => {
          self.$f7.dialog.close()
          if (res.code === 200) {
            this.$f7ready((f7) => {
              var toastTop = f7.toast.create({
                text: '上传成功',
                position: 'top',
                closeTimeout: 1500,
              })
              toastTop.open()
              f7.views.main.router.back()
            })
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },300),
  },

  mounted() {},
}
</script>

<style lang="scss" scoped>
span,
p {
  color: #ffffff;
  font-size: 16px;
}
.inputA {
  border-bottom: 1px solid #ffffff;
}
.bg_blur {
  float: left;
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);
  background: url('../assets/img/playerInfo_bg.jpg');
}
.navbarUpload {
  display: flex;
  align-items: center;
  height: 9vh;
  .navbar_l {
    width: 12vw;
    .svg-icon {
      width: 10vw;
      height: 10vw;
    }
  }
  .navbar_m {
    flex: 1;
    width: 72vw;
    margin-left: 1vw;
    span {
      font-size: 18px;
      white-space: nowrap;
    }
    .mText {
      width: 72vw;
    }
  }
}
</style>
